<template>
  <el-main>
    <h1>问卷列表</h1>
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column label="问卷ID" prop="id"></el-table-column>
      <el-table-column label="问卷简介" prop="desc"></el-table-column>
      <el-table-column label="问卷基础预警百分比" prop="basicWarning"></el-table-column>
      <el-table-column label="问卷严重预警百分比" prop="seriousWarning"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleInfo(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">修改预警百分比</el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="updateDialogVisible" title="预警百分比" width="30%">
      <span>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="120px" status-icon>
          <el-form-item label="基础预警百分比" prop="basic">
            <el-input v-model="ruleForm.basic" autocomplete="off" type="number"></el-input>
          </el-form-item>
          <el-form-item label="严重预警百分比" prop="serious">
            <el-input v-model="ruleForm.serious" autocomplete="off" type="number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
          </el-form-item>
        </el-form>
      </span>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  name: "Questionnaire",
  data() {
    var checkBasic = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('基础预警不能为空'));
      }
      setTimeout(() => {
        if (value >= this.ruleForm.serious) {
          callback(new Error('基础预警应小于严重预警'));
        } else {
          callback();
        }
      }, 500);
    };
    var checkSerious = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('严重预警不能为空'));
      }
      setTimeout(() => {
        if (value <= this.ruleForm.basic) {
          callback(new Error('严重预警应大于基础预警'));
        } else {
          callback();
        }
      }, 500);
    };
    return {
      tableData: [],
      updateDialogVisible: false,
      ruleForm: {
        questionnaireId: 0,
        basic: 0,
        serious: 0
      },
      rules: {
        basic: [
          { validator: checkBasic, trigger: 'blur' }
        ],
        serious: [
          { validator: checkSerious, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.$store.state.token == null) this.$router.push({path: "/login"});
    this.$axios({
      // 通过axios向后端发送请求
      method: "get",
      url: "/questionnaire/all"
    }).then(res => {
      // console.log(res);
      var data = res.data;
      if (data.code == 200) {
        this.tableData = data.data;
      } else {
        this.$message({
          message: data.msg,
          type: "error"
        });
        this.$router.push({path: "/"});
      }
    });
  },
  methods: {
    handleInfo(index, row) {
      // console.log(index, row);
      this.$router.push({name: "Question", params: {questionnaireId: row["id"]}});
    },
    handleUpdate(index, row) {
      this.ruleForm.questionnaireId = row["id"];
      this.ruleForm.basic = row["basicWarning"];
      this.ruleForm.serious = row["seriousWarning"];
      // console.log(index, row);
      this.updateDialogVisible = true;
    },
    handleDelete(index, row) {
      // console.log(index, row);
      this.$axios({
        // 通过axios向后端发送请求
        method: "delete",
        url: "/questionnaire/" + row["id"]
      }).then(res => {
        // console.log(res);
        var data = res.data;
        if (data.code == 200) {
          this.$message({
            message: row["desc"] + "删除成功",
            type: "success"
          });
          this.$router.replace("/refresh");
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
          this.$router.push({path: "/"});
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            // 通过axios向后端发送请求
            method: "post",
            url: "/questionnaire/update/" + this.ruleForm.questionnaireId,
            params: {
              basic: this.ruleForm.basic,
              serious: this.ruleForm.serious
            }
          }).then(res => {
            // console.log(res);
            var data = res.data;
            if (data.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.$router.replace({path: "/refresh"});
            } else {
              this.$message({
                message: data.msg,
                type: "error"
              });
            }
          });
        } else {
          this.$message({
            message: "信息不全",
            type: "error"
          });
          return false;
        }
        this.updateDialogVisible = false;
      });
    },
    resetForm(formName) {
      this.updateDialogVisible = false;
      this.$refs[formName].resetFields();
    },
  }
}
</script>